<template>
    <div class="find">
        <div style="width:92%; margin-left: 4%; margin-top: 3%; background: #ffff;border-radius: 5%;"
            v-for="item in state.list" :key="item.id">
            <div class="flex-a flex-b">
                <div class="avatar">
                    <nut-avatar> <img src="https://cxj.szzkba.cn/upload/i/2024/06/04/182133.jpeg" /> </nut-avatar>
                    <text style="margin-left: 5%;font-weight: bold;white-space: nowrap;">{{ item.user.user_Nickname
                        }}</text>
                </div>
                <div><nut-button color="#2b35fa" size="mini">立即邀约</nut-button></div>
            </div>
            <nut-row>
                <div style="display: flex; margin-left: 5%; margin-top:5%; align-items: center;">
                    <text style="font-size: 18px;">{{ item.share_Content }}</text>
                </div>
            </nut-row>
            <nut-row>
                <div>
                    <video v-if="item.share_Type == '2'" id="video" style="width: 100%;" :src="item.share_URL"
                        initial-time="0" :controls="true" :autoplay="false" :loop="false" :muted="false" />
                    <div v-if="item.share_Type == '1'" class="imageBox" @click="showFn">
                        <image v-for="(ele, index) in item.imgList" :key="index" style="width:160px;height: 187px;"
                            :src="ele">
                        </image>
                        <nut-image-preview :pagination-visible="false" :show="state.showPreview" :images="state.imgData"
                            @close="hideFn" />
                    </div>
                </div>
            </nut-row>
            <div class="flex-a flex-b foot">
                <div><nut-button color="#2b35fa" size="mini" plain>给Ta打赏</nut-button></div>
                <div style="display: flex;align-items: center;">
                    <div class="flex-a">
                        <SFollow size="16" />
                        <text style="font-size: 16px;color: #999999;margin:0 20rpx 0 10rpx;">7</text>
                    </div>
                    <div class="flex-a">
                        <Message size="16" />
                        <text style="font-size: 16px;color: #999999;margin:0 0 0 10rpx;">1</text>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <div style="width:92%; margin-left: 4%; margin-top: 3%; background: #ffff;border-radius: 5%;">
        <nut-row>
            <nut-col :span="16">
                <div class="avatar">
                    <image class="avatarImage" src="https://cxj.szzkba.cn/upload/i/2024/06/04/182133.jpeg">
                    </image>
                    <text style="margin-left: 5%;font-weight: bold;">米米</text>
                </div>
            </nut-col>
            <nut-col :span="8">
                <div style="margin-left: auto;margin-top: 23%;"><nut-button color="#2b35fa"
                        size="mini">立即邀约</nut-button></div>
            </nut-col>
        </nut-row>
        <nut-row>
            <div style="display: flex; margin-left: 5%; margin-top:5%; align-items: center;">
                <text style="font-size: 18px;">贴贴</text>
            </div>
        </nut-row>
        <nut-row>
            <div class="imageContainer" style="text-align: left;">
                <div class="imageBox" v-for="(item, index) in state.imgData" :key="index" @click="showFn">
                    <image style="width:160px;height: 187px;" :src="item.src">
                    </image>
                    <nut-image-preview :pagination-visible="false" :show="state.showPreview" :images="state.imgData"
                        @close="hideFn" />
                </div>
            </div>
        </nut-row>
    </div> -->
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Video } from '@nutui/nutui'
import { SFollow, Message } from '@nutui/icons-vue-taro'
import { getUserShare } from '../../../../api/index'
const state = reactive({
    components: {
        SFollow,
        Message
    },
    showPreview: false,
    imgData: [
        {
            src: 'https://cxj.szzkba.cn/upload/i/2024/06/05/163233.jpg'
        },
        {
            src: 'https://cxj.szzkba.cn/upload/i/2024/06/05/163233.jpeg'
        },
        {
            src: 'https://cxj.szzkba.cn/upload/i/2024/06/04/182133.jpeg'
        },
    ],
    list: []
})

const showFn = () => {
    state.showPreview = true
}

const hideFn = () => {
    state.showPreview = false
}
const source = ref({
    src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
    type: 'video/mp4'
})
const options = ref({
    playsinline: true,
    controls: true
})
const getList = () => {
    getUserShare().then(res => {
        if (res.code == 0) {
            let list = res.data.list
            list.forEach(item => {
                if (item.share_Type == '1') {
                    item.imgList = item.share_URL.split(',')
                }
            })
            state.list = list
        }
    })
}
getList()
</script>
<style lang="scss">
.avatar {
    display: flex;
    margin-right: 5%;
    align-items: center;
}

.icon {
    width: 60rpx;
    height: 60rpx;
}

.foot {
    padding: 10rpx 0 20rpx;
    border-bottom: 1rpx solid #EEEEEE;
}

.avatarImage {
    margin-left: 5%;
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
}

.nut-video-player {
    margin-left: 5%;
    width: 620px;
}

.imageContainer {
    display: flex;
    /* 启用Flexbox布局 */
    flex-wrap: wrap;
    /* 允许元素在必要时换行 */
}

.imageBox {
    flex: 1;
    box-sizing: border-box;
}

@media screen and (min-width: 620px) {
    .imageBox {
        flex-basis: calc(100% / 3);
        /* 屏幕宽度大于600px时，每个div平分容器宽度的三分之一 */
    }
}
</style>